<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>
        .setColor {
            color: red;
        }

        .setFontSize {
            font-size: 20px;
        }

        .setBorder {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- 双大括号，是把model数据解释成html文本，而不会解释成html代码。此时，如果希望渲染一个输入框到浏览器中，而不是文本，则必须使用v-html执行。 -->
    <div id="app">

        <h1 v-html="msg">输入框</h1>

        <!-- v-text，这个和插值表达式效果一致 -->
        <h2 v-text="msg2"></h2>

        <!-- 可以根据值为true或者false，来选择是否显示出来，它是修改的样式style="display:none" -->
        <h3 v-show="isShow">我在蜗牛学苑学习</h3>

        <!-- 它是如果它的值是false，它是直接干掉了这个dom节点！和v-show做好对比。 -->
        <h4 v-if="flag">111111111111</h4>
        <h4 v-else-if="flag2">222222222222</h4>
        <h4 v-else="flag2">33333333333</h4><br>

        <!-- 当我们希望，动态地去绑定一些html标签的属性的时候，可以使用v-bind来配置。
                由于它用的地方非常多，所以，它可以简写为 :  冒号！
        -->
        <input v-bind:type="inputType" :value="inputValue"><br>

        <!-- 还可以使用v-bind绑定对象的方式进行绑定样式 -->
        <div v-bind:class="{setColor:flag3, setFontSize:flag4, setBorder:flag5 }">使用v-bind绑定对象,使用后面的值进行控制是否使用样式(￣▽￣)
        </div><br>

        <!-- 选择使用数组的形式对class中的属性值进行绑定 -->
        <div v-bind:class="[index1,index2,index3]">学习使用v-bind绑定数组中class样式</div><br>

        <!-- 使用v-bind动态绑定内联样式,style是内联样式 -->
        <div v-bind:style="{color:color, fontSize:fontSize}">使用v-bind绑定内联样式(✪ω✪)</div><br>

        <!-- 使用数组的形式绑定内联样式，style是内联样式 -->
        <div v-bind:style="[style1,style2,style3]">使用数组的形式绑定内联样式(✪ω✪)</div>


        <!-- 总结：
            
            v-bind绑定标签属性的时候，可以选择3种方式进行属性值的绑定！
            ①字符串形式：直接绑定类型值的字符串比如 type="text" password等内容，例如上面的绑定的v-bind:type="inputType"
            ②数组形式：:style = "[a,b]"  使用的是直接是item元素被data中的数据直接替换！
            ③对象形式: :style ="{key:data的key, key2:data的key}"
        
        -->
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: "<input type='text'>",

                    msg2: "这是输出的文本", //只能输出文本

                    isShow: true, //只有当isShow为true的时候，才会显示出来

                    flag: true,
                    flag2: false,

                    inputType: "buton",
                    inputValue: "输入框",

                    flag3: true,//改为false，则不会显示
                    flag4: true,
                    flag5: true,

                    index1: 'setColor', //绑定class中的属性值有点奇怪，改为false，就不会显示了
                    index2: 'setFontSize',
                    index3: 'setBorder',

                    color: 'red',//内联样式
                    fontSize: '20px',

                    style1: {
                        color: 'red',
                        fontSize: '20px'
                    },
                    style2: {
                        color: 'blue',
                        fontSize: '30px'
                    },
                    style3: {
                        color: 'green',
                        fontSize: '40px'
                    }
                }
            },


        })
    </script>
</body>

</html>